<template>
	<view>
		<view class="shangpin">
			<view class="top">
				<view class="photo">
					<image src="/static/images/Ellipse 6.png" mode=""></image>
				</view>
				<!-- 	<view class="search"> -->
				<u-search placeholder="输入要搜索的商品" v-model="keyword" @custom="search" @search="search"></u-search>
				<!-- </view> -->
			</view>

			<!-- 分类 -->
			<view class="cla">
				<view class="left">
					<view :class="isActive == index?'btn1':'btn'" @click="active(index)"
						v-for="(item,index) in classList" :key="index">
						<text>{{item.categoryName}}</text>
					</view>
				</view>

				<view class="right">
					<view class="rightTit">
						{{title}}
					</view>
					<view class="shopList">
						<view class="claList" v-for="(item,index) in shopList" :key="index">
							<view class="pic">
								<image :src="item.image" mode=""></image>
								<view class="modal">
									<text class="introduce">{{item.storeName}}</text>
									<text class="introduce1">{{item.storeInfo}}</text>
								</view>
							</view>
							<view class="operate">
								<text class="price">￥{{item.price}}</text>
								<u-number-box v-model="item.value" @change="valChange(item)" button-size="20"
									inputWidth="20"></u-number-box>
								<u-button type="primary" text="添加" class="add" @click="minus(item)"></u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 分类商品列表
				shopList: [],
				// 分类列表
				classList: [],
				// 分类列表标题
				title: '',
				keyword: '',
				isActive: 0,
				value: 0,
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getShopList()
		},
		methods: {
			// 商品数量的value值变化监听
			valChange(e) {
				console.log('当前值为: ' + e.item.value)
			},
			// 商品分类一级列表点击事件
			active(i) {
				this.isActive = i
				this.title = this.classList[i].categoryName
				this.shopList = this.classList[i].yxStoreProductTwo
				console.log(this.shopList)
			},
			// 商品列表搜索
			search() {
				this.$requestGetMethod(this.$serverData.baseUrl + `/cashier/category`, {
					productName: this.keyword
				}).then(data => {
					console.log(data);
				})
			},
			// 点击添加商品
			minus(i) {
				this.$requestGetMethod(this.$serverData.baseUrl + `/cashier/jianKuCun/${i.id}/${this.value}`).then(
					res => {
						console.log(res);
					})
			},
			// 商品分类列表接口
			getShopList() {
				this.$requestGetMethod(this.$serverData.baseUrl + `/cashier/category`, {}).then(res => {
					console.log(res);
					this.classList = res;
					this.shopList = this.classList[0].yxStoreProductTwo
					console.log(this.shopList);
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.shangpin {
		padding-bottom: 100rpx;

		.top {
			// width: 1556rpx;
			margin: 56rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			// background: #333;
			.photo {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			// .search {
			// 	width: 1396rpx;
			// }
		}

		.cla {
			width: 820rpx;
			height: 100%;
			display: flex;

			.left {
				width: 180px;

				.btn {
					width: 180px;
					height: 48rpx;
					background: #fff;
					color: #333;
					text-align: center;
					font-family: PingFang SC;
					font-size: 18rpx;
					font-style: normal;
					font-weight: 400;
					line-height: 48rpx;
				}

				.btn1 {
					width: 180px;
					height: 48rpx;
					background: #1684FC;
					color: #FFF;
					text-align: center;
					font-family: PingFang SC;
					font-size: 18rpx;
					font-style: normal;
					font-weight: 400;
					line-height: 48rpx;
				}
			}

			.right {
				margin-left: 24rpx;

				.rightTit {
					color: #333;
					text-align: left;
					font-family: PingFang SC;
					font-size: 18rpx;
					font-style: normal;
					font-weight: bold;
					line-height: normal;
					margin-bottom: 24rpx;
				}

				.shopList {
					display: flex;
					flex-wrap: wrap;

					.claList {
						width: 289px;
						height: 354rpx;
						margin-right: 24rpx;

						.pic {
							width: 249px;
							height: 249rpx;
							margin: 20rpx;
							position: relative;

							image {
								width: 249px;
								height: 249rpx;
							}

							.modal {
								width: 249px;
								height: 63rpx;
								background: rgba(255, 255, 255, 0.15);
								backdrop-filter: blur(2px);
								position: absolute;
								bottom: 0;
								right: 0;

								.introduce {
									display: block;
									color: #333;
									text-align: left;
									font-family: PingFang SC;
									font-size: 16rpx;
									font-style: normal;
									font-weight: 400;
									line-height: normal;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 1;
									margin-top: 15rpx;
								}

								.introduce1 {
									display: block;
									color: #999;
									font-family: PingFang SC;
									font-size: 12rpx;
									font-style: normal;
									font-weight: 400;
									line-height: normal;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 1;
									margin-top: 3rpx;
								}
							}
						}

						.operate {
							display: flex;
							align-items: center;
							margin: 20rpx;

							.price {
								display: block;
								width: 60px;
								color: #F00;
								// text-align: center;
								font-family: PingFang SC;
								font-size: 21rpx;
								font-style: normal;
								font-weight: bold;
								line-height: normal;
								margin-right: 10rpx;
							}

							.add {
								width: 67px;
								height: 38px;
								margin-left: 10rpx;
							}
						}
					}
				}
			}
		}
	}


</style>